<template>
    <div>
         <!--导航-->
        <div class="rotation-tab1">
            <ul>
                <li v-for="(item,index) in tablist" :key="index" @click="torouter(item.to)">{{item.name}}
                    <span class="iconfont icon-xiangshang" v-if="index==4"></span>
                </li>
            </ul>
        </div>
        <div class="brand">
            <div class="brand-bgdc"></div>
            <div>
                <div class="brand-left">
                    <span>SHOWROOM</span>
                    <span class="iconfont icon-tianjia"></span>
                </div>
                <div class="brand-right">
                    <div>
                        <span>所有</span>
                        <span>共有15个品牌</span>
                    </div>
                    <div>
                        <div v-for="(item,index) in list" :key="index" @click="toshowrommdetails">
                            <img :src="item.categoryImg" alt="">
                            <div>{{item.categoryName}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="operation" v-if="isshow">
            <div class="operation-item">
                <span class="iconfont icon-icon_pc icon"></span>
                <div>个人中心</div>
            </div>
            <div class="operation-item" @click="toindex" style="border-top: 1px solid #fff;border-bottom: 1px solid #fff;">
                <span class="iconfont icon-shouye icon"></span>
                <div>回到首页</div>
            </div>
            <div class="operation-item" @click="totop">
                <span class="iconfont icon-gengxin icon"></span>
                <div>TOP</div>
            </div>
        </div>
    </div>
</template>

<script>
import {findBrandStr} from '@/common/request.js'
export default {
    data() {
        return {
            tablist:[
            {
                name:'首页',
                to: '/'
            },
            {
                name:'MAXSOO线上旗舰店',
                to: '/flagshipstore'
            },
            {
                name:'关于我们',
                to: '/about'
            },
            {
                name:'合作伙伴',
                to: '/partners'
            },
            {
                name:'SHOWROOM',
                to: '/showroom'
            }],
            isshow: false,
            list: []
        }
    },
    created() {
        this.getfindBrandStr()
    },
    methods: {
        getfindBrandStr() {
            findBrandStr({}).then(res=>{
                console.log(res)
                this.list = res
            })
        },
        torouter(page) {
            this.$router.push({
                path: page
            })
        },
        totop() {
            var timer = setInterval(()=>{
                document.documentElement.scrollTop = document.documentElement.scrollTop-50
                if(document.documentElement.scrollTop==0){
                    clearInterval(timer); 
                }
            },50)
        },
        showIcon() {
            if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 684) {            
                this.isshow = true
            } else {
                this.isshow = false
            }
        },
        toindex() {
            this.$router.push({
                path: '/'
            })
        },
        toshowrommdetails() {
            this.$router.push({
                path: '/branddetails'
            })
        }
    },
    mounted() {
        window.addEventListener("scroll", this.showIcon);
    },
}
</script>

<style lang="scss">
.rotation-tab1 {
    width: 100%;
    >ul {
        overflow: hidden;
        width: 640px;
        position: absolute;
        top: 78px;
        left: 50%;
        margin-left: -320px;
        z-index: 4;
        >li {
            float: left;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            margin: 0 25px;
            cursor: pointer;
            position: relative;
            >span {
                font-size: 14px;
                position: absolute;
                bottom: -16px;
                left: 50%;
                margin-left: -7px;
            }
        }
    }
}
.brand {
    width: 100%;
    margin: 0 auto;
    .brand-bgdc {
        width: 100%;
        height: 165px;
        background: #000;
    }
    >div:nth-child(2) {
        width: 1253px;
        overflow: hidden;
        .brand-left {
            padding: 53px 85px 0 0;
            position: relative;
            float: left;
            font-weight: 600;
            >span:nth-child(1) {
                font-size: 24px;
                color: #101010;
            }
            >span:nth-child(2) {
                font-size: 15px;
                color: #101010;
                position: absolute;
                right: 35px;
                top: 61px;
            }
        }
        .brand-right {
            border-left: 1px solid #bbb;
            margin-top: 44px;
            margin-bottom: 318px;
            float: left;
            >div {
                margin-left: 20px;
            }
            >div:nth-child(1) {
                width: 899px;
                padding: 21px 0 46px 0;
                border-bottom: 1px solid #bbb;
                position: relative;
                >span {
                    font-size: 16px;
                    color: #101010;
                }
                >span:nth-child(2) {
                    display: inline-block;
                    width: 100px;
                    position: absolute;
                    right: 0;
                    top: 21px;
                }
            }
            >div:nth-child(2) {
                width: 899px;
                overflow: hidden;
                >div {
                    float: left;
                    width: 265px;
                    height: 405px;
                    background: #f6f6f6;
                    margin-top: 28px;
                    margin-right: 34px;
                    >img {
                        width: 265px;
                        height: 360px;
                    }
                    >div {
                        font-size: 16px;
                        color: #101010;
                        text-align: center;
                        line-height: 44px;
                    }
                }
            }
        }
    }
}
.operation {
    position: fixed;
    right: 0;
    top: 231px;
    z-index: 3;
    .operation-item {
        background: #000;
        width: 62px;
        height: 82px;
        text-align: center;
        padding-top: 18px;
        >.icon {
            font-size: 28px;
            color: #fff;
        }
        >div {
            font-size: 14px;
            color: #fff;
            margin-top: 8px;
        }
    }
}
</style>